<script setup>
import { ref } from 'vue'
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue'

const formModel = ref({
  currentPage: 1,
  pageSize: 20,
  name: ''
})

const item = {
  date: '2016-05-02',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles',
}
const tableData = ref(Array.from({ length: 40 }).fill(item))
</script>

<template>
  <div class="data-container">

    <div class="search-container">
      <el-form :inline="true">
        <el-form-item label="姓名:">
          <el-input v-model="formModel.name" placeholder="请输入姓名" clearable />
        </el-form-item>
        <el-form-item label="姓名:">
          <el-input v-model="formModel.name" placeholder="请输入姓名" clearable />
        </el-form-item>
       <el-form-item label="姓名:">
        <el-input v-model="formModel.name" placeholder="请输入姓名" clearable />
      </el-form-item><el-form-item label="姓名:">
        <el-input v-model="formModel.name" placeholder="请输入姓名" clearable />
      </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="content-header">
      <div class="title">角色管理</div>
      <div class="btn">
        <el-button type="primary" :icon="Plus">添加角色</el-button>
      </div>
    </div>

    <el-table :data="tableData" height="680">
      <el-table-column label="序号" type="index" align="center" width="60" />
      <el-table-column prop="name" label="姓名" width="120" />
      <el-table-column prop="address" label="地址" />
      <el-table-column prop="date" label="日期" align="right" width="140" />
      <el-table-column width="120" label="操作">
        <el-button type="primary" circle :icon="Edit" />
        <el-button type="danger" circle :icon="Delete" />
      </el-table-column>
    </el-table>

    <el-affix position="bottom" :offset="0">
      <el-pagination
          :page-sizes="[20, 50, 100, 200]"
          small
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
      />
    </el-affix>
  </div>
</template>

<style scoped lang="scss">
  :deep(.el-table__body) {
    padding-bottom: 46px;
  }
  .content-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding:  {
      left: 12px;
      right: 30px;
    }
    .title {
      font-size: 16px;
      color: #5c5c5c;
    }
  }
  .el-pagination {
    background-color: #fff;
    height: 50px;
    padding: {
      left: 12px;
    }
  }
  .search-container {
    padding: {
      top: 20px;
      left: 12px;
    }
    .el-form-item {
      margin-right: 20px;
    }
  }
</style>